<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="a web chat system by node.js">
    <meta name="author" content="phachon">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.css">
    <link rel="stylesheet" href="/css/sweetalert.css">
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">

    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/plugins/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/js/plugins/socket/socket.io.js"></script>
    <script type="text/javascript" src="/js/common/common.js"></script>
    <script type="text/javascript" src="/js/module/user.js"></script>
    <script type="text/javascript" src="/js/module/chat.js"></script>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">phaChat 聊天室</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">首页</a></li>
                <li class="active"><a href="javascript:;">聊天室</a></li>
                <li><a href="/about/index">关于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> 欢迎：<%= user.username %> <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="javascript:;" name="set" data-link="/user/set"><span class="glyphicon glyphicon-cog"></span> 个人中心 </a></li>
                        <li><a href="javascript:;" name="password" data-link="/user/password"><span class="glyphicon glyphicon-certificate"></span> 修改密码 </a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;" name="logout" onclick="Chat.logout('确定要退出吗？', '/author/logout')" data-link="#" ><span class="glyphicon glyphicon-log-out"></span> 安全退出 </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" style="margin-top: 80px">
    <h3 class="chat-header">马上开始愉快的聊天吧...</h3>
    <div class="row row-offcanvas">
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="panel panel-default chat-list">
                <h4 class="text-center">通信录</h4>
                <div class="input-group" style="padding: 0 10px;">
                    <input type="text" name="search" value="" class="form-control" />
                    <span class="input-group-btn">
                        <button class="btn btn-info" type="button"><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                </div>
                <hr>
                <div class="account-list">
                    <% if(users) {
                    users.forEach(function(user){ %>
                    <a href="javascript:;" class="list-group-item">
                        <img  class="img-circle" src="/images/avatar-female.jpg" alt="image">
                        <label><%= user.username %></label>
                        <span data="<%= user.user_id%>" class="icon-circle text-warning"></span>
                    </a>
                    <% });
                     } %>
                </div>
                <div class="chat-list-footer">
                    <h5 class="text-center">
                        <label id="count">Count：<%= users.length %></label>
                        <label id="online_count"></label>
                    </h5>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-9">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>
            <div id="chat-main">
                <div class="chat-thread">
                    <ul id="chat_ul"></ul>
                </div>
                <form method="post" action="/chat/chat" onkeydown="if(event.keyCode == 13) return false;">
                <div class="input-group message">
                    <input type="text" class="form-control" name="message" placeholder="输入聊天信息" required="required">
                    <input type="hidden" class="form-control" name="user_id" value="<%= user.user_id %>" >
                      <span class="input-group-btn">
                        <button class="btn btn-info" id="send" type="button" onclick="Chat.submit(this.form)">发送</button>
                      </span>
                </div>
                </form>
            </div>
        </div>
    </div>
    <hr class="text-danger">
    <footer class="footer">
        <p>&copy; phachon@163.com 2016</p>
    </footer>
</div>
<script type="text/javascript">
    User.set();
    Chat.init();
</script>
</body>
</html>